<template>
  <div class="my-color-picker">
    <!-- <PickerDropdown ref="dropdown" v-model="showPicker" @pick="confirmValue" @clear="clearValue" :color="color"
      :show-alpha="showAlpha" :predefine="predefine" /> -->

    <div>选中的颜色为：{{ color }}</div>
    <br />
    <myColorPicker v-model="color" show-alpha :predefine="predefineColors">
      <el-button type="primary">选择颜色</el-button>
    </myColorPicker>



  </div>
</template>

<script >
// import Color from 'element-ui/packages/color-picker/src/color';
// import PickerDropdown from 'element-ui/packages/color-picker/src/components/picker-dropdown.vue';
import myColorPicker from './myColorPicker.vue'
console.log(myColorPicker);
export default {
  components: {
    // PickerDropdown
    myColorPicker
  },
  data() {
    return {
      color: 'rgba(255, 69, 0, 0.68)',
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577'
      ]
    }
  }
}
</script>

<style scoped lang='less'>
.my-color-picker {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>